<template>
  <div class="community-management">
    <el-card>
      <h2>小区管理</h2>
      <el-table :data="communities" style="width: 100%" border>
        <el-table-column prop="id" label="小区ID" width="100" />
        <el-table-column prop="name" label="小区名称" />
        <el-table-column prop="address" label="地址" />

        <el-table-column prop="phone" label="联系电话" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '../utils/request'

const communities = ref([])

const fetchCommunities = async () => {
  try {
    const res = await request.get('/community/list')
    // 兼容ResponseUtil.success返回格式
    communities.value = res.data?.data || res.data || []
  } catch (e) {
    ElMessage.error('获取小区列表失败')
  }
}

onMounted(() => {
  fetchCommunities()
})
</script>

<style scoped>
.community-management {
  padding: 20px;
}
</style> 